<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery</title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			$('.name li:first').append(' (First)');
			$('.name li:last').append(' (Last)');
			$('.name').find('li').first().append(' (First)');
			$('.name').find('li').first().next().append(' (Second)');
			$('.name').find('li').last().append(' (Last)');
			
			$('.menu').find('li').first().addClass('bold').hover(function(){
				$(this).nextAll().toggle();
			}).nextAll().hide();
		});
    </script>
    <style type="text/css">
		.menu {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.bold {
			font-weight:bold;
		}
    </style>
</head>
<body>
	<ul class="menu">
    	<li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</body>
</html>
